<template>
    <div style="width: 200px;">
        <m-menu :data="data1" name='a' index='b' icon='c' children='d' defaultActive="1" active-text-color="red" backgroundColor="rgb(245,245,245)"></m-menu>
    </div>
    <div>
        <m-infiniteMenu name='a' index='b' icon='c' children='d' :data="data2" defaultActive="2-1-2" backgroundColor="rgb(245,245,245)" active-text-color="green"></m-infiniteMenu>
    </div>
</template>
<script lang="ts" setup>
let data1 = [{
    a: '导航1',
    b: '1',
    c: 'Document'
}, {
    a: '导航2',
    b: '2',
    c: 'Document'
}, {
    a: '导航3',
    b: '3',
    c: 'Document',
    d: [
        {
            a: '导航4',
            b: '3-1',
            c: 'Document'
        }, {
            a: '导航5',
            b: '3-2',
            c: 'Document'
        }
    ]
},]
let data2 = [{
    a: '导航1',
    b: '1',
    c: 'Document'
}, {
    a: '导航2',
    b: '2',
    c: 'Document',
    d: [
        {
            a: '导航2-1',
            b: '2-1',
            c: 'Document',
            d: [
                {
                    a: '导航2-1-1',
                    b: '2-1-1',
                    c: 'Document'
                }, {
                    a: '导航2-1-2',
                    b: '2-1-2',
                    c: 'Document'
                }
            ]
        }, {
            a: '导航5',
            b: '5',
            c: 'Document'
        }
    ]
}, {
    a: '导航3',
    b: '3',
    c: 'Document',
    d: [
        {
            a: '导航4',
            b: '4',
            c: 'Document'
        }, {
            a: '导航5',
            b: '5',
            c: 'Document'
        }
    ]
},]
</script>
<style lang="scss" scoped></style>